<template>
	<!-- 小纸条页 -->
	<view class="paper">
		<u-navbar :is-back="false" title="聊天列表" title-color="#000" :title-bold="true">
			<view slot="right">
				<view @click="showPopup = true" style="margin-right: 20rpx;">
					<u-icon name="grid" size="36"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="h-full scroll-box" v-if="list.length > 0">
			<scroll-view class="scroll" ref="scrollView" scroll-y="true" :refresher-enabled="refresher"
				:refresher-triggered="triggered" @refresherrefresh="refresh()" @scrolltolower="reachBottom()">
				<paper-list v-for="(item,index) in list" :key="index" :item="item"></paper-list>
				<u-loadmore :status="loadStatus"></u-loadmore>
			</scroll-view>
		</view>
		<!-- 空数据 -->
		<u-empty v-else text="本来无一物,何处惹尘埃" src="/static/platform/svg/spring.svg" font-size="32" icon-size="320"
			mode="message" margin-top="300"></u-empty>
		<!-- 底部弹窗 -->
		<u-popup v-model="showPopup" mode="bottom" border-radius="30">
			<view class="operation-tool">
				<view class="head-title">管理</view>
				<view class="operation-bottom">
					<view class="operation-item" @click="popupHandle('clear')">
						<view class="circular-box">
							<u-icon class="circular-icon" name="trash" size="38"></u-icon>
						</view>
						<view class="item-text">清空</view>
					</view>
				</view>
				<view class="cancel" @click="showPopup=false">取消</view>
			</view>
		</u-popup>
		<buttom-tabbar></buttom-tabbar>
	</view>
</template>

<script>
	import PaperList from '@/pages/platform/paper/cpns/paper-list.vue'
	export default {
		components: {
			PaperList
		},
		data() {
			return {
				list: [],
				queryParam: {
					pageNo: 0,
					pageSize: 10
				},
				showPopup: false,
				loadStatus: 'loadmore',
				triggered: false,
				refresher: true

			}
		},
		created() {
			this.init()

		},
		onShow() {
			uni.$on('sendMessage', (data) => {
				this.sendMessage(data)
			});
		},
		mounted() {},
		methods: {
			init() {
				this.getMessageList()
				this.initWebSocket()
			},
			initWebSocket() {
				uni.$on('getMessage', (data) => {
					this.handleWsMessage(JSON.parse(data))
				});
			},
			sendMessage(message) {
				const fromIndex = this.list.findIndex(item => item.fromId === message.fromId)
				const toIndex = this.list.findIndex(item => item.toId === message.fromId)
				let historyMessage = undefined
				if (fromIndex !== -1) {
					historyMessage = this.list[fromIndex]
					this.list.splice(fromIndex, 1)
				} else if (toIndex !== -1) {
					historyMessage = this.list[toIndex]
					this.list.splice(toIndex, 1)
				}
				historyMessage.content = message.content
				this.list.unshift(historyMessage)
			},
			handleWsMessage(message) {
				const index = this.list.findIndex(item => item.receiver === message.fromId)
				if (index !== -1) {
					const historyMessage = this.list[index]
					historyMessage.content = message.content
					this.list.splice(index, 1)
					this.list.unshift(historyMessage)
				} else {
					this.$u.api.messageData.messageUserInfo({
						userId: message.fromId
					}).then(res => {
						message.name = res.data.name
						message.avatar = res.data.avatar
						message.receiver = res.data.id
						this.list.unshift(message)
					})
				}

			},
			getMessageList() {
				this.$u.api.messageData.list(this.queryParam).then(res => {
					this.list = res.data.records
					this.setLoadStatus()
				})
			},
			setLoadStatus() {
				if (this.list.length < this.queryParam.pageSize) {
					this.loadStatus = "nomore"
				}
			},
			getNextMessageList() {
				this.queryParam.pageNo += 10
				this.$u.api.messageData.list(this.queryParam).then(res => {
					const length = res.data.records.length
					if (length > 0) {
						this.list.push(...res.data.records)
						if (length < this.queryParam.pageSize) {
							this.setTimeoutLoadStatus("nomore")
						} else {
							this.setTimeoutLoadStatus("loadmore")
						}
					} else {
						this.setTimeoutLoadStatus("nomore")
					}
				})
			},
			setTimeoutLoadStatus(status) {
				setTimeout(() => {
					this.loadStatus = status
				}, 1000)
			},
			// scroll-view到底部加载更多
			reachBottom() {
				// 是否可加载
				if (this.loadStatus === 'loadmore') {
					// 加载中
					this.loadStatus = "loading"
					this.getNextMessageList()
				}
			},
			// 下拉刷新
			refresh() {
				this.triggered = true
				this.resetQuery()
				this.getMessageList()
				setTimeout(() => {
					// 停止下拉刷新
					this.triggered = false;
				}, 500)
			},
			resetQuery() {
				this.queryParam.pageNo = 0
				this.loadStatus = "loadmore"
			},
			// 好友列表
			handleFirend() {
				this.$u.route('pages/platform/paper/friend')
			},
			// 弹窗操作
			popupHandle(type) {
				const that = this
				if (type === 'clear') {
					uni.showModal({
						title: '提示',
						content: '您确定要清空所有消息吗？',
						success(res) {
							if (res.confirm) {
								that.list = []
								that.$u.toast('消息已清空')
							}
						}
					})
				}
				this.showPopup = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paper {

		.scroll-box {

			.scroll {
				height: calc(100vh - 250rpx);
			}

		}

		.operation-tool {

			.head-title {
				padding: 20rpx;
				padding-bottom: 0;
				font-size: 14px;
			}

			.operation-bottom {
				padding: 20rpx;
				color: #999;
				display: inline-flex;

				.operation-item {
					margin-right: 50rpx;

					.circular-box {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 72rpx;
						height: 72rpx;
						margin-top: 20rpx;
						margin-bottom: 10rpx;
						background-color: #f2f4f7;
						border-radius: 50%;

						.circular-icon {
							color: #000;
							display: flex;

						}
					}

					.item-text {
						display: flex;
						margin-left: 10rpx;
					}
				}

			}

			.cancel {
				padding: 20rpx;
				background-color: #f2f4f7;
				font-size: 16px;
				text-align: center;
			}
		}
	}
</style>